import React, { useState } from 'react';

import { Button, Form, Input, Collapse, Tree, Card } from 'antd';

import style from './index.less';
import AccountContain from './AccountContain';
const { Search } = Input;

const AccountMine: React.FC = () => {
  const [storeName, setStoreName] = useState('longhu');
  const [form] = Form.useForm();
  const onChange = (e) => {};

  const treeDatas = [
    {
      key: 'longhu',
      title: '龙湖小店',
    },
    {
      key: 'miandian',
      title: '缅甸小店',
    },
  ];
  const onselect = (value) => {
    setStoreName(value); // 当卡片切换时拿到切换数据
  };

  return (
    <div className={style.accountmineboss}>
      <div className={style.accountminepanel}>
        <div className={style.accountminecontain}>
          <div className={style.accountminecard}>
            <Card
              style={{ width: 250, height: '100vh' }}
              title={
                <Search
                  style={{
                    marginBottom: 8,
                  }}
                  onChange={onChange}
                />
              }
              size="small"
            >
              <Tree
                treeData={treeDatas} //  treeNodes 数据
                draggable
                onSelect={onselect}
                defaultSelectedKeys={['longhu']}
              />
            </Card>
          </div>
          <div className={style.accountminecardcontain}>
            <div className={style.accountminecardcontains}>
              <AccountContain storeName={storeName} />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default AccountMine;
